<template>
    <AreaPicker
        v-model:country="country"
        :countries="countries"
        v-model:area="area"
        :areas="areas"
        v-model:customer="customer"
        :customers="customers"
    />

    <button @click="showRect = !showRect">Click</button>
    <Rect v-if="showRect" />
</template>

<script>
import { ref, computed, watch, onMounted, nextTick } from 'vue';
import AreaPicker from './components/AreaPicker.vue';
import Rect from './components/Rect.vue';

export default {
    components: {
        AreaPicker,
        Rect,
    },

    setup() {
        // 页面是否已经初始化
        let _inited = false;

        const showRect = ref(false);

        // 国家
        const country = ref('');
        const countries = [
            { value: 'china', label: '中国' },
            { value: 'usa', label: '美国' },
        ];

        // 地区
        const area = ref('');
        const allAreas = {
            china: [
                { value: 'beijing', label: '北京' },
                { value: 'shanghai', label: '上海' },
            ],
            usa: [
                { value: 'newyork', label: '纽约' },
                { value: 'washington', label: '华盛顿' },
            ],
        };
        const areas = computed(() => {
            if (!country.value) return [];
            return allAreas[country.value] || [];
        });

        // 客户
        const customer = ref('');
        const allCustomers = {
            china: {
                beijing: [
                    { value: 'zhangsan', label: '张三' },
                    { value: 'lisi', label: '李四' },
                ],
                shanghai: [
                    { value: 'wangwu', label: '王五' },
                    { value: 'zhaoliu', label: '赵六' },
                ],
            },
            usa: {
                newyork: [{ value: 'john', label: '约翰' }],
            },
        };
        const customers = computed(() => {
            if (!country.value || !area.value) return [];
            return allCustomers[country.value]?.[area.value] || [];
        });

        watch(country, () => {
            if (!_inited) return;
            console.log('clear area');
            area.value = '';
        });

        watch(area, () => {
            if (!_inited) return;
            console.log('clear customer');
            customer.value = '';
        });

        async function getData() {
            return ['usa', 'newyork', 'john'];
        }

        onMounted(async () => {
            // 读取服务器数据
            const res = await getData();
            country.value = res[0];
            area.value = res[1];
            customer.value = res[2];

            // 务必等待 DOM 更新成功后修改状态
            nextTick(() => {
                _inited = true;
            });
        });

        return {
            country,
            countries,
            area,
            areas,
            customer,
            customers,
            showRect,
        };
    },
};
</script>

<style>
.m-2 {
    margin: 0.5em;
}
</style>
